<template>
	<view class="recordListbg">
		<view class="bgfff" style="width: 100%; height: 90rpx; line-height: 90rpx">
			<u-tabs :list="tabList" @click="tabsClick" :scrollable="false" :current="currentTab" lineWidth="40"
				lineColor="#2979ff"></u-tabs>
		</view>
		<view class="bgfff pad30">
			<u-input placeholder="请输入姓名搜索" v-model="searchName" clearable></u-input>
		</view>
		<view class="pad30">
			<view class="cards" v-for="(it, i) in filteredList" :key="i">
				<view class="flex-cb marT20">
					<view class="color999">姓名:</view>
					<view>{{ it.nickname }}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">车牌:</view>
					<view>{{ it.plateNumber }}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">手机号:</view>
					<view @click="callPhone(t.mobile)">{{ it.mobile }}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999"></view>
					<view class="flex-c">
						<view v-if="currentTab === 0" class="look bgMain colorfff fontbold" @click="audit(it, true)">通过
						</view>
						<view v-if="currentTab === 0" class="look bgRed colorfff fontbold marL20" @click="kickOut(it)">
							驳回
						</view>
						<view v-if="currentTab === 1" class="look bgRed colorfff fontbold marL20" @click="kickOut(it)">
							踢出车队
						</view>
					</view>
				</view>
			</view>
			<view style="margin: 40rpx 0">
				<u-loadmore status="more" />
			</view>
		</view>
	</view>
</template>

<script>
	import commonApi from "@/api/common.js";
	export default {
		data() {
			return {
				planId: "",

				tabList: [{
						name: "未审核",
						value: 0,
					},
					{
						name: "已通过",
						value: 1,
					},
				],

				currentTab: 0,
				page: 1,
				size: 10,
				status: "loading",
				dataList: [],
				total: 0,
				searchName: "",
			};
		},
		onLoad(e) {
			this.planId = e.planId;
			this.captainDriverList();
		},
		computed: {
			filteredList() {
				if (!this.searchName) return this.dataList;
				return this.dataList.filter(
					(item) => item.nickname && item.nickname.indexOf(this.searchName) !== -1
				);
			},
		},
		methods: {
			tabsClick(e) {
				this.currentTab = e.value;
				this.captainDriverList();
			},

			captainDriverList() {
				this.dataList = [];
				commonApi.captainDriverList(this.planId).then((res) => {
					if (res.status == 200) {
						let list = res.data;
						if (this.currentTab === 0) {
							// 未通过
							this.dataList = list.filter((item) => !item.auditStatus);
						} else {
							// 已通过
							this.dataList = list.filter((item) => item.auditStatus);
						}
					}
				});
			},
			//审核
			audit(item, type) {
				let that = this;
				let text = type ?
					`是否通过${item.nickname}的入队申请？` :
					`是否驳回${item.nickname}的入队申请？`;
				uni.showModal({
					cancelColor: "#999",
					confirmColor: type ? "#4285F4" : "red",
					title: "提示",
					cancelText: "取消",
					confirmText: "确定",
					content: text,
					success: async (res) => {
						if (res.confirm) {
							let path = `${this.planId}/captainDriver/${item.applyId}/audit`;
							commonApi
								.audit(path, {
									auditStatus: type,
								})
								.then((res) => {
									if (res.status == 200) {
										that.showMsg("操作成功");
										setTimeout((e) => {
											that.captainDriverList();
										}, 1000);
									}
								});
						}
					},
				});
			},

			//踢出车队
			kickOut(item, type) {
				let text = this.currentTab === 1 ?
					`是否将成员${item.nickname}踢出车队？` :
					`是否驳回${item.nickname}的入队申请？`;
				let that = this;
				uni.showModal({
					cancelColor: "#999",
					confirmColor: "red",
					title: "提示",
					cancelText: "取消",
					confirmText: "确定",
					content: text,
					success: async (res) => {
						if (res.confirm) {
							commonApi.kickOut(this.planId, item.applyId).then((res) => {
								if (res.status == 200) {
									that.showMsg("操作成功");
									setTimeout((e) => {
										that.captainDriverList();
									}, 1000);
								}
							});
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.recordListbg {
		width: 100%;
		min-height: 100%;

		.cards {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.look {
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				text-align: center;
			}
		}
	}
</style>
